﻿@model ICollection<DiarySocial.Models.Diary>
@{
    int i = 0;
    var arrowClass = "left";
    var timelineClass = "";
}
@foreach (var m in Model)
{
    if (i % 2 == 0)
    {
        // right
        arrowClass = "left";
        timelineClass = "";
    }
    else
    {
        // left
        arrowClass = "right";
        timelineClass = "alt";
    }
    i++;
    <article id="post-id-@m.DiaryId" class="timeline-item @timelineClass">
        <div class="timeline-caption">
            <section class="comment-body panel panel-default">
                <header class="panel-heading bg-white">
                    <a href="#">@m.Author.UserName</a>
                    <span class="text-muted m-l-sm pull-right">
                        <i class="fa fa-angle-down"></i>
                    </span>
                </header>
                <div class="panel-body">
                    <span class="arrow @arrowClass"></span>
                    <span class="timeline-icon">
                        <a href="#" class="thumb-sm avatar">
                            <img src="~/Images/avatar.png" class="img-circle">
                        </a>
                    </span>
                    <span class="timeline-date">
                        <i class="fa fa-clock-o"></i>
                        @m.Created.ToString("ddd, h:mm tt")
                    </span>
                    <div>@m.Excerpt</div>
                    <div class="comment-action m-t- ">
                        <a href="#" data-toggle="class" class="btn btn-default btn-xs active">
                            <i class="fa fa-star-o text-muted text"></i>
                            <i class="fa fa-star text-danger text-active"></i>
                            Like
                        </a>
                        <a href="#comment-form" class="btn btn-default btn-xs">
                            <i class="fa fa-mail-reply text-muted"></i> Reply
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </article>
    for (int ic = 0; ic < m.Comments.Count; ic++)
    {
        var c = m.Comments.ElementAt(ic);
        <article id="comment-id-@c.CommentId" class="timeline-item comment-item comment-reply @timelineClass">
            <div class="timeline-caption">
                <a class="pull-left thumb-sm avatar">
                    <img src="~/Images/avatar.png">
                </a>
                <section class="comment-body panel panel-default text-sm">
                    <div class="panel-body">
                        <span class="text-muted m-l-sm pull-right">
                            <i class="fa fa-clock-o"></i>
                            @c.Created.ToString("ddd, h:mm tt");
                        </span>
                        <a href="#">@c.Author.UserName</a>
                        <span>: </span>
                        @c.Text
                    </div>
                </section>
            </div>
        </article>
    }
}